<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Performance test</title>
  <script>
    function callback(list, ob) {
      list.getEntries().forEach((e) => {
        console.log(e);
      });
    }

    let observer = new PerformanceObserver(callback);
    observer.observe({ entryTypes: ['mark', 'measure'] });

  </script>
</head>
<img src="../src/img/banner1.jpg" alt="" srcset="">

<body>
  <script>
    // window.onload = function () {
    //   const perEntries = window.performance
    //   const postEntries = window.performance.getEntries()
    //   console.log(perEntries);
    //   console.log(postEntries);
    //   const fp = window.performance.getEntriesByName('first-paint')
    //   console.log(fp);
    // }
  </script>
  <script src="./test.js"></script>
  <script>
    window.performance.mark('start');
    console.log('before 1s');
    setTimeout(() => {
      console.log('after 1s');;
      window.performance.mark('end');
      window.performance.measure('calc', 'start', 'end')
    }, 1000)
  </script>

</body>

</html>